<template>
  <div class="add-form">
    <el-dialog :title="titleInfo.text+titleInfo.pageTitle" :visible.sync="dialogFormVisible">
      <el-form
        :rules="rules"
        ref="dataForm"
        :model="formBase"
        label-position="left"
        label-width="100px"
        style="width: 95%; margin-left:10px;">
        <el-form-item label="文章标题:" prop="title">
          <el-input v-model="formBase.title"></el-input>
        </el-form-item>
        <el-form-item label="文章内容:" prop="articleBody">
         <quill-editor
          v-model="formBase.articleBody"
          :options="editorOption">
          ></quill-editor>
        </el-form-item>
        <el-form-item label="视频地址:" prop="videoURL">
          <el-input v-model="formBase.videoURL"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormH">{{$t('table.cancel')}}</el-button>
        <el-button type="primary" @click="createData">{{$t('table.confirm')}}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
// 导入组件
import { quillEditor } from 'vue-quill-editor'
import { update, add } from '@/api/hmmm/articles'
export default {
  name: 'AddArticle',
  components: {
    quillEditor
  },
  props: {
    titleInfo: {
      type: Object,
      required: true
    },
    formBase: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      editorOption: {
        // 对富文本编辑器的配置 占位配置
        placeholder: '',
        modules: {
          // 配置工具栏
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'],
            [{ list: 'ordered' }, { list: 'bullet' }],
            ['blockquote', 'code-block'],
            ['image', 'link']
          ]
        }
      },
      dialogFormVisible: false,
      // 表单验证规则
      // 格式： 键：要验证的字段, 值是一个数组，每一项就是一条规则
      rules: {
        title: [
          { required: true, message: '请输入标题', trigger: 'blur' },
          { min: 5, max: 30, message: '长度在 5 到 30 个字符', trigger: 'blur' }
        ],
        articleBody: [
          { required: true, message: '请输入内容', trigger: 'blur' },
          { min: 10, max: 3000, message: '输入不少于10个字符', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogShow () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false
    },
    // 表单提交
    createData () {
      this.$refs.dataForm.validate(async valid => {
        if (valid) {
          this.dialogFormH()
          const data = {
            ...this.formBase
          }
          if (this.formBase.id) {
            await update(data).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          } else {
            await add(this.formBase).then(() => {
              this.$emit('newDataes', this.formBase)
            })
          }
        } else {
          this.$message.error('*号为必填项!')
        }
      })
    }
  },
  // 挂载结束

  mounted: function () {},
  // 创建完毕状态
  created () {
  },
  // 组件更新
  updated: function () {}
}
</script>
<style>
.add-form .ql-editor{
  height: 200px;
}
.add-form .ql-toolbar.ql-snow{
  padding: 0 8px;
}
</style>
